<html>

<head>
	<meta charset="UTF-8">
	<title>淘兴趣</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="/stylesheets/pagination.css" />
	<script type="text/javascript" src="/javascripts/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="/javascripts/bootstrap.min.js"></script>
</head>

<body>
	<% include header %>
	<div class="container">
		<div class="row mt-2">
			<div class="col-md-3">
				<div class="card">
					<img src="<%= topicData.image == 'no' ? '/images/default.jpg' : '/imageUploaded/'+topicData.image %>"
						alt="" class="card-img-top" />
					<div class="card-body">
						<h5 class="card-title"><%= topicData.name %></h5>
						<small class="text-muted">订阅(<%= topicData.subscripe_num ==null ? 0: topicData.subscripe_num%>)</small>
					</div>
					<div class="row m-1">
						<a href="show_topic/add_comment?id=<%= topicId %>"
							class="btn btn-primary w-40 mr-1">参与</a>
						<% if(isShowSubscrbe){ %>
						<a href="/show_topic/unsubscribe?topicId=<%= topicData.id %>"" class="btn btn-primary w-40 m-auto">取消订阅</a>
						<% }else{ %>
						<a href="/show_topic/subscribe?topicId=<%= topicData.id %>" class="btn btn-primary w-40 m-auto">订阅</a>
						<% } %>
					</div>
				</div>
			</div>
			<div class="col-md-9">
				<div class="card-row">

					<% topicComment.forEach((item)=>{ %>
					<div class="mb-2 card">
						<div class="media card-body">
							<img class="align-self-start mr-3 rounder-circle"
								src="<%= item.image == null ? '/images/default.jpg' : '/imageUploaded/'+item.image %>"
								style="width: 64px;height: 64px;" />
							<div class="media-body">
								<h5 class="mb-0"><%= item.account %></h5>
								<small class="text-muted"><%= item.create_time %></small>
								<a href="">
									<p><%= item.content %></p>
								</a>
							</div>
						</div>
					</div>
					<% }) %>

				</div>

				<div class="middle">
					<ul class="pagination">
					  <% if( pathNum < 4){ %>
		  
					  <% for(let i = pathNum ;i>0;i-- ){ %>
					  <li><a href="?path=<%= parseInt(currentPathNum)-1 %>&id=<%= topicId %>">«</a></li>
					  <li><a href="?path=<%= parseInt(currentPathNum) %>&id=<%= topicId %>"> <%= pathNum - i + 1 %> </a></li>
					  <li><a href="?path=<%= parseInt(currentPathNum)-+1 %>&id=<%= topicId %>">»</a></li>
					  <% } %>
		  
					  <%}else{%>
					  <li><a href="?path=<%= parseInt(currentPathNum)-1 %>&id=<%= topicId %>">«</a></li>
					  <li><a href="?path=<%= parseInt(currentPathNum) %>&id=<%= topicId %>"><%= parseInt(parseInt(currentPathNum)) %></a></li>
					  <li><a href="?path=<%= parseInt(currentPathNum)+1 %>&id=<%= topicId %>"><%= parseInt(currentPathNum)+1 %></a></li>
					  <li><a href="?path=<%= parseInt(currentPathNum)+2 %>&id=<%= topicId %>"><%= parseInt(currentPathNum)+2 %></a></li>
					  <li><a href="?path=<%= parseInt(currentPathNum)+3 %>&id=<%= topicId %>"><%= parseInt(currentPathNum)+3 %></a></li>
					  <li><a href="?path=<%= parseInt(currentPathNum)+1 %>&id=<%= topicId %>">»</a></li>
					  <%}%>
					</ul>
				  </div>
				  
			</div>

			

		</div>
	</div>
</body>

</html>